/**发票管理 */
<template>
  <div class="invoice-page">
    <div class="invoice-top-box">
      <el-card shadow="always">
        <div slot="header">
          <line-header title="发票信息预览"></line-header>
        </div>
        <div class="card-body">
          <el-row>
            <el-col :span="6">
              <span class="top-title-box">发票总金额</span>
<!--              <el-tag>￥{{(userInfo.consumeAmount*0.01).toFixed(2)}}</el-tag>-->
              <el-tag v-if="userInfo.role==2">￥{{((userInfo.leftInvoiceAMount+userInfo.invoiceAmount)*0.01).toFixed(2)}}</el-tag>
              <el-tag v-else>￥{{((globalData.validInvoiceAmount+globalData.invoiceAmount)*0.01).toFixed(2)}}</el-tag>

            </el-col>
            <el-col :span="6">
              <span class="top-title-box">可开发票金额</span>
              <el-tag v-if="userInfo.role==2">￥{{(userInfo.leftInvoiceAMount*0.01).toFixed(2)}}</el-tag>
              <el-tag v-else>￥{{(globalData.validInvoiceAmount*0.01).toFixed(2)}}</el-tag>
            </el-col>

            <el-col :span="6">
              <span class="top-title-box">已开发票金额</span>
              <el-tag v-if="userInfo.role==2">￥{{(userInfo.invoiceAmount*0.01).toFixed(2)}}</el-tag>
              <el-tag v-else>￥{{(globalData.invoiceAmount*0.01).toFixed(2)}}</el-tag>
            </el-col>

            <el-col :span="6">
              <span class="top-title-box">已开发票总数</span>
              <el-tag>{{invoiceNum}}张</el-tag>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </div>
    <div class="invoice-bottom-box">
      <el-card shadow="always">
        <div slot="header">
          <line-header title="发票记录"></line-header>
        </div>
        <div class="card-body">
          <div class="table-top-box">
            <div class="top-left-box">
              <el-select v-model="selectInvoice" placeholder="发票类型">
                <el-option
                  v-for="item in invoiceClass"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <el-select v-model="selectStatus" placeholder="开具状态">
                <el-option
                  v-for="item in statusList"
                  :key="item.key"
                  :label="item.label"
                  :value="item.key"
                >
                </el-option>
              </el-select>
              <el-input
                v-model="invoiceNumber"
                placeholder="搜索发票号码"
              ></el-input>
              <el-input
                v-model="invoiceHeader"
                placeholder="搜索发票抬头"
              ></el-input>
              <el-input v-model="userName" placeholder="搜索用户名" v-if="userInfo.role==1||userInfo.role==4"></el-input>
            </div>
            <div class="top-right-box">
              <el-button type="primary" @click="hkLoadList">筛选</el-button>
            </div>
          </div>
          <div class="table-bottom-box">
            <el-button type="primary" v-if="userInfo.role==2" @click="hkClickLook">申请发票</el-button>
          </div>
          <div class="table-box">
            <el-table
              :data="tableList"
              style="width: 100%"
              header-cell-class-name="header-cell-class-name"
              stripe
              border
            >
              <el-table-column prop="id" label="编号" align="center">
                <template slot-scope="scope">{{ pageSize*(currentPage-1)+ scope.$index+1 }}</template>
              </el-table-column>
              <el-table-column v-if="userInfo.role==1||userInfo.role==4" prop="account" label="用户名" align="center">
              </el-table-column>
              <el-table-column prop="ino" label="发票号码" align="center">
              </el-table-column>
              <el-table-column prop="title" label="发票抬头" align="center">
              </el-table-column>
              <el-table-column prop="amount" label="发票金额" align="center">
                <template slot-scope="{row}">
                  ￥{{(row.amount*0.01).toFixed(2)}}
                </template>
              </el-table-column>
              <el-table-column prop="kind" label="发票类型" align="center">
                <template slot-scope="{row}">
                  增值税{{row.kind==1?"专用":"普通"}}发票
                </template>
              </el-table-column>
              <el-table-column prop="status" label="当前状态" align="center">
                <template slot-scope="{ row }">
                  <el-tag :type="row.status | filiterTagType">
                    {{ row.status | filiterTagText }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column
                prop="createTime"
                label="申请时间"
                align="center"
              >
                <template slot-scope="{ row }">
                  <div>{{hkGetTimeFmt(row.createTime)}}</div>
                </template>
              </el-table-column>
              <el-table-column prop="finishTime" label="开具时间" align="center">
                <template slot-scope="{ row }">
                  <div>{{(row.finishTime&&row.finishTime>0)?hkGetTimeFmt(row.finishTime):""}}</div>
                </template>
              </el-table-column
              ><el-table-column label="操作" align="center">
                <template slot-scope="{ row }">
                  <el-button
                    type="primary"
                    size="small"
                    icon="el-icon-view"
                    plain
                    @click="hkClickLook(row)"
                    >查看</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <div class="pagination-box">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[20, 50, 100]"
                :page-size="20"
                :total="total"
                layout=" prev, pager, next,sizes,jumper"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import LineHeader from "@/components/line-header/index";
import { invoiceStatusList, invoiceClass } from "@/utils/tools";
import {trace} from "../../../utils/trace"
import {mapGetters} from "vuex"
import {hkGetTimeFmt} from "../../../utils/tools"
import { sum_global } from '@/api/summary'

export default {
  components: { LineHeader },
  props: {},
  data() {
    return {
      globalData:{},
      hkGetTimeFmt: hkGetTimeFmt,
      currentPage: 1,
      pageSize: 20,
      total: 400,
      invoiceNum:0,
      selectInvoice: "", // 发票类型
      selectStatus: "", // 开具状态
      invoiceNumber: "", //发票号码
      invoiceHeader: "", //发票抬头
      userName: "", //用户名
      tableList: [
        // {
        //   id: "1123123",
        //   serial: "01",
        //   sno: "12312313",
        //   title: "上海智火信息科技有限公司",
        //   amount: 40,
        //   kind: 1,
        //   status: 1,
        //   createTime: "2017-10-31  23:12:00",
        //   finishTime: "2017-10-31  23:12:00"
        // },

      ],
      invoiceClass: invoiceClass,
      statusList: invoiceStatusList
    };
  },
  filters: {
    filiterTagType(val) {
      return invoiceStatusList.find(item => {
        return item.key == val;
      }).type;
    },
    filiterTagText(val) {
      return invoiceStatusList.find(item => {
        return item.key == val;
      }).label;
    }
  },
  watch: {},
  computed: {
    ...mapGetters(["userInfo"])
  },
  methods: {

    hkLoadList() {     //筛选
      // selectInvoice selectStatus  invoiceNumber  invoiceHeader userName
      // 发票类型 开具状态  搜索发票号码 搜索发票抬头  搜索用户名
      // kind status ino  title  account
      trace("发票筛选",this.selectInvoice,this.selectStatus  ,this.invoiceNumber  ,this.invoiceHeader ,this.userName);

      let page = this.currentPage;
      let count = this.pageSize;
      let direction = 1;
      let kind = this.selectInvoice;
      if(kind<1) kind = 8789324728947;
      let status = this.selectStatus;
      if(status<1) status = 8789324728947;

      let ino = this.invoiceNumber;
      if(ino.length<1)ino = undefined;

      let title = this.invoiceHeader;
      if(title.length<1)title = undefined;

      let account = this.userName;
      if(account.length<1)account = undefined;


      this.$store.dispatch('finance/invoiceQuery', {page, count, direction,status,kind,ino,title,account}).then((data) => {
        trace("refundQuery-获取发票的列表-data", data);
        this.tableList = data.data;
        this.total = data.total;
        this.invoiceNum = data.successCount + data.finishCount;
        this.refundSuccessAmount = data.refundSuccessAmount;
      })
        .catch((err) => {
          trace("获取发票的列表-refundQuery-err", err)
        })

    },
    //查看
    hkClickLook(item) {
      let path = "/finance/invoice/add";
      if (parseInt(item.status) > 1&& this.userInfo.role==2) {
        path = "/finance/invoice/details";
      }
      this.$router.push({
        path: path,
        query: { id: item.id }
      });
    },
    handleSizeChange(value) {
      this.pageSize = value;
      this.currentPage = 1;
      this.getList();
    },
    handleCurrentChange(value) {
      this.currentPage = value;
      this.getList();
    },

    getList(){
      let page = this.currentPage;
      let count = this.pageSize;
      let direction = 1;
      let kind = 8789324728947;
      let status = 8789324728947;
      this.$store.dispatch('finance/invoiceQuery', {page, count, direction,status}).then((data) => {
        trace("refundQuery-获取发票的列表-data", data);
        this.tableList = data.data;
        this.total = data.total;
        this.invoiceNum = data.successCount + data.finishCount;
        this.refundSuccessAmount = data.refundSuccessAmount;
      })
        .catch((err) => {
          trace("获取发票的列表-refundQuery-err", err)
        })
    },
  },
  async created() {
    if(this.userInfo.role!=2){
      let res = await sum_global();
      trace("global-data=", res)
      if (res.code == 2000) {
        this.globalData = res.data;
      }
    }
    this.getList();
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.invoice-top-box {
  .card-body {
    .top-title-box {
      margin-right: 10px;
    }
  }
}
::v-deep .header-cell-class-name {
  background: #ecf0f3;
}
.invoice-bottom-box {
  margin-top: 30px;
  .table-top-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .top-left-box {
      .el-select {
        width: 120px;
        margin: 0 5px;
      }
      .el-input {
        width: 180px;
        margin: 0 5px;
      }
    }
  }
  .table-bottom-box {
    margin: 20px 5px;
  }
}
</style>
